<template>
    <div class="SHZY-common-layout">
        <div class="SHZY-common-layout-center">
            <el-row class="SHZY-common-search-box" :gutter="16">
                <el-form @submit.native.prevent="">
                    <el-col :span="6">
                        <el-form-item label="检验批号">
                            <el-input v-model="query.code" placeholder="检验批号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="物料">
                            <el-input v-model="query.material" placeholder="物料" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="供应商">
                            <el-input v-model="query.supplier" placeholder="供应商" clearable />
                        </el-form-item>
                    </el-col>
                    <template v-if="showAll">
                        <el-col :span="6">
                            <el-form-item label="批次号">
                                <el-input v-model="query.batchNumber" placeholder="批次号" clearable />
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                            <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true"
                                v-if="!showAll">展开</el-button>
                            <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="SHZY-common-layout-main SHZY-flex-main">
                <div class="SHZY-common-head">
                    <div>
                        <el-button :loading="btnLoading" type="primary" icon="el-icon-check" @click="decisionConfirm()">确
                            认</el-button>&nbsp;
                        <el-radio-group v-model="opType" size="small" @input="handleTabClick">
                            <el-radio-button label="ALL">全部</el-radio-button>
                            <el-radio-button label="OK">合格</el-radio-button>
                            <el-radio-button label="NG">不合格</el-radio-button>
                        </el-radio-group>

                    </div>
                    <div class="SHZY-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh SHZY-common-head-icon" :underline="false"
                                @click="reset()" />
                        </el-tooltip>
                    </div>
                </div>
                <SHZY-table v-loading="listLoading" :data="list" has-c :hasNO="false"
                    @selection-change='handleSelectionChange'>
                    <el-table-column width="50" label="序号" align="center" fixed="left">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="overdue" label="标记" width="70" align="center" fixed="left">
                        <template slot="header" slot-scope="scope">
                            <el-dropdown>
                                <span class="el-dropdown-link">标记 <i class="el-icon-question"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="right"><i class="ym-custom ym-custom-checkbox-blank-circle"
                                            style="color:#ff625c;font-size:14px;">逾期 </i></el-dropdown-item>
                                    <el-dropdown-item command="bottom"><i class="ym-custom ym-custom-checkbox-blank-circle"
                                            style="color:#f9a646;font-size:14px;">即将逾期 </i></el-dropdown-item>
                                    <el-dropdown-item command="refresh"><i class="ym-custom ym-custom-checkbox-blank-circle"
                                            style="color:#6dcc51;font-size:14px;">正常</i></el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template slot-scope="scope">
                            <i class="ym-custom ym-custom-checkbox-blank-circle" style="color:#ff625c;font-size:16px;"
                                v-if="scope.row.overdue == 2"></i>
                            <i class="ym-custom ym-custom-checkbox-blank-circle" style="color:#f9a646;font-size:16px;"
                                v-else-if="scope.row.overdue == 1"></i>
                            <i class="ym-custom ym-custom-checkbox-blank-circle" style="color:#6dcc51;font-size:16px;"
                                v-else></i>
                        </template>
                    </el-table-column>
                    <el-table-column label="检验批" prop="code" width="200" align="left" fixed="left">
                        <template slot-scope="scope">
                            <div>检验批号：<el-link type="primary" @click="addOrUpdateHandle(scope.row.id)">{{
                                scope.row.code }}</el-link></div>
                            <div>
                                <el-tag>{{ scope.row.type }}</el-tag>&nbsp;<el-tag>{{ scope.row.incomingQty
                                }}</el-tag>&nbsp;<el-tag v-if="scope.row.judgeStatus == 'OK'"
                                    type="success">合格</el-tag><el-tag v-if="scope.row.judgeStatus == 'NG'"
                                    type="danger">不合格</el-tag>
                            </div>
                            <div>检验人员：{{ scope.row.employeeName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="" prop="materialCode" width="200" :show-overflow-tooltip="true" align="left"
                        fixed="left">
                        <template slot-scope="scope">
                            <div>物料编码：{{ scope.row.materialCode }}</div>
                            <div>物料描述：{{ scope.row.materialDes }}</div>
                            <div>批次号：{{ scope.row.batchNumber }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="" prop="supplier" width="200" :show-overflow-tooltip="true" align="left"
                        fixed="left">
                        <template slot-scope="scope">
                            <div>供应商编码：{{ scope.row.supplier }}</div>
                            <div>供应商描述：{{ scope.row.supplierDes }}</div>
                            <div>检验日期：{{ shzy.toDate(scope.row.date, "yyyy-MM-dd HH:mm:ss") }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="决策" prop="inspectionlot" min-width="1540" align="left">
                        <template slot-scope="scope">
                            <el-row :gutter="20" style="margin-bottom:5px;" v-for="(item, index) in scope.row.inspection"
                                :key="index">
                                <el-col style="width:250px;">
                                    报检单号：
                                    <el-input v-model='item.code' clearable required disabled :style='{ "width": "150px" }'>
                                    </el-input>
                                </el-col>
                                <el-col style="width:150px;">
                                    数量：
                                    <el-input v-model='item.incomingQty' clearable required disabled
                                        :style='{ "width": "80px" }'>
                                    </el-input>
                                </el-col>
                                <el-col style="width:250px;">
                                    使用决策：
                                    <el-select v-if="scope.row.judgeStatus == 'OK'" v-model='scope.row.decision'
                                        placeholder='请选择决策' filterable clearable required :style='{ "width": "150px" }'>
                                        <el-option v-for="(item, index) in okDecision" :key="index" :label="item.fullName"
                                            :value="item.enCode">
                                            <span style="float: left">{{ item.fullName }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{
                                                item.enCode }}</span>
                                        </el-option>
                                    </el-select>
                                    <el-select v-else v-model='scope.row.decision' placeholder='请选择决策' filterable clearable
                                        required :style='{ "width": "150px" }'>
                                        <el-option v-for="(item, index) in ngDecision" :key="index" :label="item.fullName"
                                            :value="item.enCode">
                                            <span style="float: left">{{ item.fullName }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{
                                                item.enCode }}</span>
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col style="width:200px;">
                                    接收数量：
                                    <!-- <el-input v-model='item.receiveQty' clearable required
                                                :style='{ "width": "80px" }'>
                                            </el-input> -->
                                    <el-input-number
                                        v-if="scope.row.destructivenessQty == 0 && scope.row.judgeStatus == 'OK'"
                                        v-model='item.incomingQty' disabled controls-position="right"
                                        :style='{ "width": "100px" }'>
                                    </el-input-number>
                                    <el-input-number v-else v-model='item.receiveQty' :min="0"
                                        :max="item.incomingQty - item.destructivenessQty" clearable required
                                        :disabled="scope.row.destructivenessQty == 0 && scope.row.judgeStatus == 'OK'"
                                        controls-position="right"
                                        @change="item.rejectQty = item.incomingQty - item.receiveQty - item.destructivenessQty"
                                        :style='{ "width": "100px" }'>
                                    </el-input-number>
                                </el-col>
                                <el-col style="width:200px;">
                                    破坏性数量：
                                    <!-- <el-input v-model='item.destructivenessQty' clearable required
                                                :style='{ "width": "80px" }'>
                                            </el-input> -->
                                    <el-input-number v-model='item.destructivenessQty' :min="0"
                                        :max="item.incomingQty - item.receiveQty" clearable required
                                        :disabled="scope.row.destructivenessQty == 0 && scope.row.judgeStatus == 'OK'"
                                        controls-position="right"
                                        @change="item.rejectQty = item.incomingQty - item.receiveQty - item.destructivenessQty"
                                        :style='{ "width": "100px" }'>
                                    </el-input-number>
                                </el-col>
                                <el-col style="width:180px;">
                                    拒收数量：
                                    <el-input v-model='item.rejectQty' required disabled :style='{ "width": "80px" }'>
                                    </el-input>
                                </el-col>
                                <el-col style="width:300px;">
                                    备注信息：
                                    <el-input v-model='scope.row.decisionDesc' clearable required
                                        :style='{ "width": "200px" }'>
                                    </el-input>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </SHZY-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData" />
            </div>
        </div>
        <SHZY-Form v-if="formVisible" ref="SHZYForm" @refresh="refresh" />
    </div>
</template>
<script>
import { getInspectionlotList, submitDecision } from '@/api/q1/business/inspectionLot'
import SHZYForm from '@/views/q1/business/inspectionLot/Form'
export default {
    components: { SHZYForm },
    name: "business-inspectionPost",
    data() {
        return {
            btnLoading: false,
            showAll: false,
            query: {
                code: undefined,
                date: undefined,
                type: undefined,
                material: undefined,
                supplier: undefined,
                batchNumber: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [],
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            opType: "ALL",
            okDecision: [],
            ngDecision: []
        }
    },
    computed: {
        menuId() {
            return this.$route.meta.modelId || ''
        }
    },
    created() {
        this.getDictionaryData()
        this.initData()
    },
    methods: {
        getDictionaryData() {
            this.$store.dispatch('base/getDictionaryData', { sort: 'okDecision' }).then((res) => {
                this.okDecision = res
            })
            this.$store.dispatch('base/getDictionaryData', { sort: 'ngDecision' }).then((res) => {
                this.ngDecision = res
            })
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query,
                menuId: this.menuId,
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                } else {
                    query[key] = _query[key]
                }
            }
            if (this.opType != "ALL") {
                query.judgeStatus = this.opType
            }
            query.statusType = "Finish"
            getInspectionlotList(query).then(res => {
                this.list = res.data.list
                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },
        addOrUpdateHandle(id) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.SHZYForm.init(id, true, '过账')
            })
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        handleSelectionChange(val) {
            const res = val.map(item => item.id)
            this.multipleSelection = val
        },
        handleTabClick(val) {
            this.multipleSelection = []
            this.initData()
        },
        decisionConfirm() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: "请选择检验批",
                    type: 'error',
                    duration: 1000
                })
                return
            }
            this.$confirm('确认过账信息已核对清楚？是否继续提交过账？', '提示', {
                type: 'warning'
            }).then(() => {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    if (this.multipleSelection[i].decision == null || this.multipleSelection[i].decision == "") {
                        this.$message({
                            message: "检验批" + this.multipleSelection[i].code + "未选择使用决策",
                            type: 'error',
                            duration: 1000
                        })
                        return
                    }
                    const inspectionList = this.multipleSelection[i].inspection
                    for (let ii = 0; ii < inspectionList.length; ii++) {
                        if (this.multipleSelection[i].judgeStatus == "OK" && this.multipleSelection[i].destructivenessQty != 0 && inspectionList[ii].receiveQty == 0) {
                            this.$message({
                                message: "报检单" + inspectionList[ii].code + "接收数量不能为0",
                                type: 'error',
                                duration: 1000
                            })
                            return
                        } else if (this.multipleSelection[i].judgeStatus == "NG" && inspectionList[ii].destructivenessQty == 0) {
                            this.$message({
                                message: "报检单" + inspectionList[ii].code + "破坏性数量不能为0",
                                type: 'error',
                                duration: 1000
                            })
                            return
                        }
                    }
                }


                let data = []
                this.multipleSelection.forEach(element => {
                    let decisionInfo
                    if (element.judgeStatus == "OK") {
                        decisionInfo = this.okDecision.find(x => x.enCode == element.decision)
                    } else {
                        decisionInfo = this.ngDecision.find(x => x.enCode == element.decision)
                    }
                    data.push({
                        id: element.id,
                        code: element.code,
                        batchNumber: element.batchNumber,
                        materialCode: element.materialCode,
                        materialDes: element.materialDes,
                        supplier: element.supplier,
                        supplierDes: element.supplierDes,
                        incomingQty: element.incomingQty,
                        udNo: element.judgeStatus == "OK" ? 1 : 0,
                        decision: element.decision,
                        decisionName: decisionInfo.fullName,
                        decisionDesc: element.decisionDesc,
                        destructivenessQty: element.destructivenessQty,
                        receiveQty: element.receiveQty,
                        inspection: element.inspection,
                        judgeStatus: element.judgeStatus
                    })
                });
                this.btnLoading = true;
                submitDecision({ list: data }).then((res) => {
                    this.btnLoading = false;
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.multipleSelection = []
                            this.initData()
                        }
                    })
                }).catch((res) => {
                    this.btnLoading = false;
                })
            }).catch(() => {
            });
        }
    }
}
</script>